/*
 * @Description: 业务表格状态按钮，可点击切换
 * @Author: Rfan
 * @Date: 2022-07-08 16:34:27
 * @LastEditTime: 2022-09-08 14:35:35
 */

import { Button } from 'antd';
import { debounce } from 'lodash-es';
import classNames from 'classnames/bind';
import { jsonClone } from '@/utils';
import { useMetadataBusinessContext } from '../contexts/MetadataBusinessContext';
import type { ICoordinate } from '@/interfaces/global';
import styles from '../styles/metadataPane.module.scss';

const cx = classNames.bind(styles);

interface IImportParams {
  coordinate: ICoordinate;
  field: { id: number; [k: string]: any };
}

interface IBtnSwitchProps {
  state: 0 | 1;
  param: IImportParams;
  businessStr: string;
}

const BtnSwitch = (props: IBtnSwitchProps) => {
  const { state, param, businessStr } = props;
  const { editBusinessFunc } = useMetadataBusinessContext();

  const switchState = debounce(() => {
    const _state = state === 1 ? 0 : 1;
    const query = jsonClone(param);
    query.field = { ...param.field, [businessStr]: _state };
    editBusinessFunc(query);
  });

  return (
    <div>
      {state === 1 ? (
        <Button
          className={cx('positive')}
          size="small"
          onClick={() => {
            switchState();
          }}
        >
          是
        </Button>
      ) : (
        <Button
          className={cx('negative')}
          type="primary"
          size="small"
          onClick={() => {
            switchState();
          }}
        >
          否
        </Button>
      )}
    </div>
  );
};

export default BtnSwitch;
